<template>
    <div class="detail">
      <breadcrumb class="breadcrumb" :navigation="navigation"></breadcrumb>
      <div class="detail-info">
        <span class="detail-info-title">
          {{detail.title}}
        </span>
        <div class="detail-user-tips">
          <div class="detail-info-tags">
            <span class="detail-info-tag"
                  v-for="tag in detail.tags"
                  :key="tag.id"
                  @mouseenter="mouseStart"
                  @mouseleave="mouseEnd">{{tag.name}}</span>
          </div>
          <div class="author-info">
            <span>{{detail.nickName}}</span>
            <span>{{detail.createTime}}</span>
          </div>
        </div>
        <div class="detail-info-context" v-html="detail.content"></div>
      </div>
      <div class="ques-list">
        <editor v-if="editor" :reply="showCancelReply" @submit="handleSubmit" />
      </div>
      <div class="ques-list">
        <h3>{{ query.total }}个回答</h3>
        <comment :comments="comments"
                  @showEditor="showEditor"
                  @submitComment="handleSubmit"
                  @cancel="cancel"></comment>
        <pagination class="page" v-if="comments.length > 0" :query="query" @page="handlePage" />
      </div>
    </div>
</template>

<script>
import Breadcrumb from '../../components/Breadcrumb'
import Comment from '../../components/Comment'
import Pagination from '../../components/Pagination'
import Editor from '../../components/Editor'
import { mapGetters } from 'vuex'
import { detail } from '@/api/problem'
import { list, add } from '@/api/comment'
import { record } from '@/api/record'

export default {
  name: 'ProblemDetail',
  data () {
    return {
      navigation: '> 问题详情',
      editor: true,
      showCancelReply: false,
      id: 0,
      query: {
        type: 2,
        parentId: 0,
        current: 1,
        size: 10,
        total: 0
      },
      detail: {},
      comments: [],
      record: {
        type: 1
      },
      temp: {}
    }
  },
  created () {
    this.id = this.$route.params.id
    this.record.objectId = this.id
  },
  mounted () {
    this.addRecord()
    this.getDeatil()
    this.getCommentList()
  },
  methods: {
    getDeatil () {
      detail(this.id).then(response => {
        var data = response.data.data
        this.detail = data
      })
    },
    getCommentList () {
      this.query.objectId = this.id
      list(this.query).then(response => {
        var data = response.data.data
        this.comments = data.records
        for (var i in this.comments) {
          if (i.children !== undefined) {
            i.children[0].parentName = i.nickName
          }
        }
        // 总数据量
        this.query.total = data.total
        // 总页数
        this.query.pages = data.pages
      })
    },
    // 添加评论
    addComment () {
      this.temp.type = 2
      this.temp.parentId = 0
      this.temp.objectId = this.id
      add(this.temp).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          this.getCommentList()
        }
      })
    },
    // 添加访问记录
    addRecord () {
      record(this.record).then(response => {})
    },
    handleSubmit (temp) {
      this.temp = temp
      this.addComment()
    },
    showEditor (editor, showCancelReply) {
      this.editor = editor
      this.showCancelReply = showCancelReply
    },
    cancel (editor, showCancelReply) {
      this.editor = editor
      this.showCancelReply = showCancelReply
    },
    mouseStart (e) {
      e.currentTarget.style.background = this.getBackground
    },
    mouseEnd (e) {
      e.currentTarget.style.background = ''
    },
    handlePage (query) {
      this.query = query
    }
  },
  watch: {
    // 当前页发生变化时，请求数据
    newCurrent (newValue, oldValue) {
      this.getList()
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ]),
    newCurrent () {
      return this.query.current
    }
  },
  components: {
    Breadcrumb,
    Comment,
    Pagination,
    Editor
  }
}
</script>

<style scoped lang="stylus">
  .detail
    width 682px
    display flex
    flex-flow column
    margin 0 20px 0 50px
    opacity: 0.9
    background #fff
    margin-bottom 20px
    padding 20px 20px 10px 20px
    .detail-info
      margin-top 20px
      .detail-info-title
        font-size 24px
        font-weight bold
      .detail-user-tips
        display flex
        justify-content space-between
        line-height 46px
        .detail-info-tags
          .detail-info-tag
            padding: 4px 12px;
            background: rgba(84,92,99,.1);
            border-radius: 12px;
            display: inline-block;
            margin-right: 8px;
            font-size: 12px;
            color: #545C63;
            line-height: 16px
            cursor pointer
          .detail-info-tag:hover
            color #fff
            /*background #23BDBD*/
        .author-info
          font-size: 12px
          color: #93999F
      .detail-info-context
        margin-top 8px
        padding 28px 16px
        border-bottom 1px solid #eee
        box-shadow 0 4px 8px 0 rgba(7,17,27,.05)
    .ques-list
      margin-top 20px
      h3
        font-size 16px
        font-weight bold
        line-height 28px
    .page
      justify-content flex-end
</style>
